<template>
  <div id="app">
    <!-- 插值表达式，其中可以放数据项，三元表达式，对象.属性  （最常用） -->
    <p>{{ uname }}</p>

    <!-- 标签的v-html属性，相当于innerHTML的意思 ，会覆盖掉原本的内容（次常用）-->
    <p v-html="info">简介：</p>

    <!-- 标签的v-text属性，相当于innerText的意思 ，会覆盖掉原本的内容-->
    <p v-text="uname"></p>

    <!-- 属性绑定指令 v-bind  可以将属性值（url）转换成 对应的数据项值 -->
    <img v-bind:src="url" alt="" />

    <!-- 时间绑定指令 v-on:时间名="事件处理程序"  v-on可以简化为@符号 -->
    <!-- 如果代码非常简单，可以直接写到template这个区域里面 -->
    <!-- age是下面定义的data数据 -->
    <button v-on:click="age++" v-html="age"></button>
    <!-- changeAge是methods节点定义的函数 -->
    <button v-on:click="changeAge" v-html="age"></button>

    <!-- 双向数据绑定v-model 输入值以后，自动修改data中的数据-->
    <input type="text" v-model="uname" />

    <!-- 
      双向数据绑定的修饰符 
    .number 将输入的值转换为数字类型和
    .trim去除字符串的首位空格
    .lazy在change 时而非input时更新（失去焦点或者按回车更新数据）
     -->
    <!-- 将输入的值改为数字类型保存到data的uname中 -->
    <input type="text" v-model.number="uname" />

    <!-- 条件判断指令 v-show 和v-if -->
    <div v-show="flag">
      data中的数据项是false的时候，隐藏，data中的数据项是true的时候显示出来
    </div>
    <!-- v-if和v-else -->
    <p v-if="age < 18">未成年</p>
    <p v-else-if="age >= 18 && age < 40">成年</p>
    <p v-else>40">中年</p>

    <!-- 遍历数据v-for -->
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.nickname }}--{{ index }}
      </li>
    </ul>

    <!-- 删除遍历出来的某条数据 -->
    <ul>
      <li v-for="(item, index) in list" :key="index">
        <input type="checkbox" />
        {{ item.nickname }}--{{ index }}
        <button @click="del(item.id)">删除这条数据</button>
      </li>
    </ul>
  </div>
</template>

<script>
//import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  // data节点用于存储数据
  //data要写成函数形式，函数中要返回一个对象
  data() {
    return {
      //页面中用到的数据
      uname: "123",
      age: "1",
      url: "http://www.itcbc.com:3006/formdata/123.jpg",
      sex: ["chifan", "shuijiao", "wan"],
      flag: true,
      list: [
        { id: 2, name: "宋江", nickname: "及时雨" },
        { id: 3, name: "吴用", nickname: "智多星" },
        { id: 5, name: "林冲", nickname: "豹子头" },
        { id: 7, name: "花荣", nickname: "小李广" },
      ],
    };
  },
  // methods是储存方法的
  methods: {
    //定义一个方法
    changeAge() {
      //vue中，找data数据。methods方法等，都是通过 this直接找【vue中固定的写法】
      console.log(this.age++);
    },
    del(id) {
      // filter方法作用是筛选出符合条件的元素
      this.list = this.list.filter((item) => {
        //return "条件";
        return item.id !== id;
      });
    },
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
